<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="../../static/layui/layui.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=BGquqFxPX3NUlRUDdP8ShwjG7CT3aFEn"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
<div class="re-main-body" style="margin-top:30px;">
    <form class="layui-form" action="">
        <div class="layui-form-item" pane="" lay-filter="selectRadio">
            <label class="layui-form-label">原始复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="selectRadio" name="like1[write]" lay-skin="primary" title="电梯"
                       value="elevator">
                <input type="checkbox" lay-filter="selectRadio" name="like1[read]" lay-skin="primary" title="地铁"
                       value="metro">
                <input type="checkbox" lay-filter="selectRadio" name="like1[game]" lay-skin="primary" title="地标"
                       value="landmark">
                <input type="checkbox" lay-filter="selectRadio" name="like1[game]" lay-skin="primary" title="停车场"
                       value="parking">
            </div>
        </div>
    </form>
    <div id="echarts" style="width:1050px;height: 500px;"></div>
</div>

</body>
<script>
    // 需要把这玩意弄成要给全局变量呀..
    var dom = document.getElementById("echarts");
    var myChart = echarts.init(dom);
    var option = {
        legend: {
            right: 10,
            data: ['parking', 'metro','led','elevator']
        },
        //点数太多,关闭动画提升性能
        animation: false,
        title: {
            text: '全国资源分布',
            left: 'center'
        },
        /*tooltip : { //悬浮提示框
            trigger: 'item'
        },*/
        bmap: {
            // center: [104.114129, 37.550339],
            center: [109.780092,34.263042],
            zoom: 6,
            roam: true,
            mapStyle: {
                //地图样式修改 比如将水的样式变成灰白(#d1d1d1) 等等
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }, {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fdfdfd'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }]
            }
        },
        series: [
            {
                name: 'parking',
                type: 'scatter',//散点图的方式来显示
                //bmap是一个插件来的
                coordinateSystem: 'bmap',
                data: [],
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        opacity: 0.8,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        color: 'purple'
                    }
                }
            },
            //
            // {
            //     name: 'pm2.5',
            //     type: 'scatter',
            //     coordinateSystem: 'bmap',
            //     data: datas.elevator.slice(20001, 35000),
            //     symbolSize: 5,
            //     itemStyle: {
            //         normal: {
            //             color: 'yellow'
            //         }
            //     }
            // }
        ]
    };
    $(document).ready(function () {
        initEcharts()
    })

    /**
     * 初始化的时候加载echarts的点位进来 分批添加
     */
    function initEcharts() {
        myChart.showLoading();
        $.ajaxSettings.async = false;
        $.get('/getALLPoints', function (data) {
            console.log(data.msg)
            var datas = data.data;
            var ser = {
                name: 'parking',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: datas,
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#4564A4'
                    }
                }
            };
            option.series.push(ser);
            myChart.hideLoading();
            myChart.setOption(option);
        }, 'json')
        // addPoints("","#4564A4");
        //异步加载其他颜色的点位进来 最后只要调用setOption(option)方法来加载数据
        addPoints("led","#48B3A7")
        addPoints("elevator","#FB7514")
        addPoints("metro","#FB3302")
    }

    function addPoints(value,color) {
        console.log('==='+value);
        // $.ajaxSettings.async = false;
        $.ajax({
            url: '/getALLPoints',
            type: "POST",
            dataType: "json",
            async: false,
            data: {name: value},
            success: function (data) {
                // console.log(data.msg)
                var datas = data.data;
                var ser1 = {
                    name: value,
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: datas,
                    symbolSize: 5,
                    itemStyle: {
                        normal: {
                            color: color
                        }
                    }
                };
                option.series.push(ser1);
                myChart.hideLoading();
                myChart.setOption(option);
            },
            error: function () {
                alert('error')
            }
        })
    }


    //  这种方法来移除点位不生效.....
    // function removePoints(value) {
    //     for(var i=0;i<option.series.length;i++){
    //         if(option.series[i].name == value){
    //             //删除这个元素
    //             option.series.splice(i,1)
    //             console.log('remove success');
    //             console.log(option.series.length)
    //         }
    //     }
    //     for(var j=0;i<option.series.length;i++){
    //         console.log(option.series[j])
    //     }
    //     myChart.setOption(option)
    // }
</script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

        form.on('checkbox(selectRadio)', function (data) {
            // console.log(data.elem); //得到checkbox原始DOM对象
            // console.log(data.elem.checked); //是否被选中，true或者false
            // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            // console.log(data.othis); //得到美化后的DOM对象
            if(data.elem.checked){
                alert('add points')
                addPoints(data.value)
            }else{
                alert('remove points')
                removePoints(data.value)
            }

        });
    });
</script>

</html>